<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>深渊涅槃</title>
    <style type="text/css">
        #all{
            background: url("image/copy02.jpg") no-repeat;
            background-size: cover;
            position: absolute;
            top: 0;
            bottom: 0px;
            right: 0px;
            left: 0px;
        }
        button{
            background: url("image/1_阿帕大陆.jpg") no-repeat;
        }
    </style>
</head>
<body >
    <div id="all">
        <img src="image/法师_男.png" style="width: 200px;height: 200px;margin-top: 380px">
            <textarea id="text" style= "width: 62%;height:60px" >深渊。。。。你将在这里涅槃</textarea>
        <button id="continue" style=" margin-left:80%;width: 50px ;height: 50px;ht:80%; display:inline-block ;">继续</button>
    </div>
</body>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
    var id=0;
    var $text=$("#text");
    $("#continue").click(function () {
       f1(id,$text);
       id++;
    });
</script>
<script type="text/javascript">
    function f1(id,$text) {
        if(id>=107){
            alert("已经完成第一章节");
        }
        $.ajax({
            "url": "/sectionOne/par01.action",
            "type": "POST",
            "data": "id="+id,
            "success": function (data, msg, xhr) {
              //  alert(data)
                $text.val(data.content);
                $("#all").css("background","imgage/"+data.img+"")
            },
            "error": function () {
                console.log("失败...");
            }
        });
    }
</script>
</html>